<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由中参数传递</title>
</head>
<body>
<div id="app">

<!--    <router-link to="/login?username=tom&password=12345">登录</router-link>-->
    <router-link to="/login/tom/12345">登录</router-link>

<!--    <router-link :to="{path:'/register/tom/12345'}">注册</router-link>-->

<!--    <router-link :to="{name:'register',query:{username:'jack',password:'123456'}}">注册</router-link>-->
    <router-link :to="{name:'register',params:{username:'jack',password:'123456'}}">注册</router-link>

    <p>---------------------------------------</p>

    <button @click="tologin">登录</button> <button @click="toregister">注册</button>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

</div>

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const login = {
        template:`
           <div>
                 <h1>欢迎登录</h1>
                 <form action="">
                    <p><input type="text" placeholder="请输入用户名" v-model="username"></p>
                    <p><input type="text" placeholder="请输入密码" v-model="password"></p>
                    <p><input type="submit" value="立即登录"></p>
                 </form>
            </div>
        `,
        data() {
            return {
                username: "",
                password:""
            }
        },
        created(){
            console.log("=========login created()==============")
            // 获取路由参数  获取当前路由对象  this.$route
            console.log(this.$route)

            // 解构赋值  {username: 'tom', password: '12345'}
            // let  username = this.$route.query.username
            // let  password = this.$route.query.password

            //  /login?username=tom&password=12345
            // let {username,password} = this.$route.query

            //  /login/tom/12345
            let {username,password} = this.$route.params

            this.username = username
            this.password = password
        }
    }
    const register = {
        template:`
           <div>
                 <h1>欢迎注册</h1>
                 <form action="">
                    <p><input type="text" placeholder="请输入用户名" v-model="username"></p>
                    <p><input type="text" placeholder="请输入密码" v-model="password"></p>
                    <p><input type="submit" value="立即注册"></p>
                </form>
            </div>
        `,

        data() {
            return {
                username: '',
                password:''
            }
        },
        created() {

            console.log(this.$route)
            // let {username,password} = this.$route.query
            let {username,password} = this.$route.params
            this.username = username
            this.password = password
        }
    }
    //  定义路由列表
    const  routes = [
        // 用户访问 /login 路径是  login组件被匹配
        {
            path:'/',
            redirect:'/login'   //  重定向 路径
        },
        {
            path:'/login/:username/:password',
            name:'login',
            component:login
        },
        {
            path:'/register',
            name:'register',
            component:register
        }

    ]

    // 创建路由对象
    const router = new VueRouter({
        routes
    })

    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            tologin(){  // 跳转到登录页

            },
            toregister(){ // 跳转到注册页

            }
        },
        router

    })
</script>


</body>
</html>
